<template>
  <div class="page-container" :class="{ 'is-full': isFull }">
    <div class="page-title">
      <dv-decoration-8 :color="[mainColor, mainColor]" :reverse="true" class="title-img" />
      <div class="h1-title">
        行业数据分析-
        <el-select v-model="source" @change="handleChange" placeholder="请选择">
          <el-option v-for="item in SourceList" :key="item.value" :disabled="item.disabled" :label="item.label" :value="item.value"> </el-option>
        </el-select>
      </div>
      <dv-decoration-8 :color="[mainColor, mainColor]" class="title-img" />
      <div class="top">
        <p class="text">更新时间：{{ updateTime }}</p>
        <i class="el-icon el-icon-refresh" @click="handleRefresh"></i>
        <i class="el-icon el-icon-full-screen" @click="handleFullScreen"></i>
      </div>
    </div>
    <div class="page-tab">
      <div class="tab-list">
        <div class="item" :class="{ active: active === 0 }" @click="handleTab(0)">会员</div>
        <div class="item" :class="{ active: active === 1 }" @click="handleTab(1)">求购</div>
        <div class="item" :class="{ active: active === 2 }" @click="handleTab(2)">资产处置</div>
        <div class="item" :class="{ active: active === 3 }" @click="handleTab(3)">招标拍卖</div>
      </div>
    </div>
    <div class="tab-content">
      <member v-if="active === 0" :source="source" :mainColor="mainColor" :mainColorOpcity="mainColorOpcity" @refresh="getData" :key="key + 1"></member>
      <buying v-if="active === 1" :source="source" :mainColor="mainColor" :mainColorOpcity="mainColorOpcity" @refresh="getData" :key="key + 2"></buying>
      <assets v-if="active === 2" :source="source" :mainColor="mainColor" :mainColorOpcity="mainColorOpcity" @refresh="getData" :key="key + 3"></assets>
      <auction v-if="active === 3" :source="source" :mainColor="mainColor" :mainColorOpcity="mainColorOpcity" @refresh="getData" :key="key + 4"></auction>
    </div>
  </div>
</template>

<script>
import member from './member/index.vue'
import buying from './buying/index.vue'
import assets from './assets/index.vue'
import auction from './auction/index.vue'
import { apiUpdateTime } from '@/api/industryData'
import { SourceList } from '@/utils/constant'

export default {
  name: 'index',
  components: { member, buying, assets, auction },
  data() {
    return {
      SourceList,
      source: '回收商',
      active: -1,
      updateTime: '',
      isFull: false,
      key: new Date().toLocaleTimeString(),
      mainColor: '#68cee0',
      mainColorOpcity: 'rgba(104, 206, 224, 0.3)',
    }
  },
  mounted() {
    this.init()
  },
  beforeDestroy() {
    localStorage.setItem('industry_dashboard_tab_active', this.active)
    localStorage.setItem('industry_dashboard_source', this.source)
  },
  methods: {
    init() {
      this.SourceList.forEach((item) => {
        item.disabled = false
      })
      const storageActive = localStorage.getItem('industry_dashboard_tab_active') || 0
      const storageSource = localStorage.getItem('industry_dashboard_source') || '回收商'
      this.active = parseInt(storageActive)
      this.source = storageSource
      this.tabChange()
      this.getData()
    },
    // 点击tab
    handleTab(index) {
      if (!index) {
        index = 0
      }
      if (index === 1) {
        this.$toast('暂未开启')
        return
      }
      // 不是回收商，从其他tab切换到会员
      if (this.source !== '回收商' && index === 0) {
        this.$toast('暂未开启')
        return
      }
      this.active = index
      this.tabChange()
    },
    tabChange() {
      // 切换到了会员，把其他来源禁用
      if (this.active === 0) {
        // 会员只有回收商数据
        this.SourceList.forEach((item) => {
          item.disabled = true
        })
        this.SourceList.find((item) => item.value === '回收商').disabled = false
      } else {
        this.SourceList.forEach((item) => {
          item.disabled = false
        })
      }
    },
    // 刷新
    handleRefresh() {
      this.key = new Date().toLocaleTimeString()
      this.getData()
    },
    getData() {
      apiUpdateTime().then((res) => {
        this.updateTime = res.data.time
      })
    },
    // 全屏
    // 在全屏与非全屏之间来回切换
    handleFullScreen() {
      this.isFullScreen() ? this.exitFullScreen() : this.fullScreen()
    },
    /**实现F11全屏效果*/
    fullScreen() {
      if (this.isFullScreen()) return
      var docElm = document.documentElement
      /*W3C*/
      if (docElm.requestFullscreen) {
        docElm.requestFullscreen()
      } /*FireFox */ else if (docElm.mozRequestFullScreen) {
        docElm.mozRequestFullScreen()
      } /*Chrome等 */ else if (docElm.webkitRequestFullScreen) {
        docElm.webkitRequestFullScreen()
      } /*IE11*/ else if (docElm.msRequestFullscreen) {
        docElm.msRequestFullscreen()
      }
      this.isFull = true
    },
    /**退出F11全屏*/
    exitFullScreen() {
      if (!this.isFullScreen()) return
      if (document.exitFullscreen) {
        document.exitFullscreen()
      } else if (document.mozCancelFullScreen) {
        document.mozCancelFullScreen()
      } else if (document.webkitCancelFullScreen) {
        document.webkitCancelFullScreen()
      } else if (document.msExitFullscreen) {
        document.msExitFullscreen()
      }
      this.isFull = false
    },
    /**判断是否全屏*/
    isFullScreen() {
      return document.fullscreenElement || document.msFullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement ? true : false
    },
    // 切换数据源
    handleChange() {
      this.handleRefresh()
    },
  },
}
</script>

<style scoped lang="scss">
$bgColor: #060a22;
$mainColor: #68cee0;
$mainColorOpcity: rgba(104, 206, 224, 0.3);
.page-container {
  background: url('../../../assets/img/bg.png') no-repeat center / 100% 100%;
  color: $mainColor;
  &:after {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background: rgba(0, 0, 0, 0.6);
  }
  &.is-full {
    width: 100vw;
    height: 100vh;
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 1001;
  }
}
.panel {
  margin: 5px;
}
.page-title {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 20px;
  .h1-title {
    flex: 0 0 auto;
    margin: 0 10px;
    font-size: 30px;
    font-weight: bold;
  }
  .title-img {
    width: 40vw;
    height: 50px;
  }
  .top {
    position: absolute;
    top: -10px;
    right: 2vw;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #ffffff;
    .el-icon {
      margin-left: 10px;
      font-size: 16px;
      cursor: pointer;
    }
  }
}
.page-tab {
  margin-top: -30px;
  margin-bottom: 20px;
  position: relative;
  z-index: 1;
  .tab-list {
    display: flex;
    justify-content: center;
    align-items: center;
    .item {
      width: 120px;
      height: 30px;
      border: 2px solid #ffffff;
      color: #ffffff;
      border-radius: 3px;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-right: 5vw;
      font-size: 16px;
      cursor: pointer;
      font-weight: bold;
      opacity: 0.8;
      &:hover {
        opacity: 1;
      }
      &.active {
        opacity: 1;
        border: 2px solid $mainColor;
        background: $mainColorOpcity;
        color: $mainColor;
      }
      &:nth-child(2) {
        margin-right: 40vw;
      }
      &:last-child {
        margin-right: 0;
      }
    }
  }
}
.tab-content {
  position: relative;
  z-index: 1;
  width: 100%;
  height: calc(100% - 90px);
}

::v-deep .h1-title .el-select {
  width: 100px;
  input {
    background: none;
    font-size: 30px;
    font-weight: bold;
    color: $mainColor;
    border: none;
  }
  .el-select__caret {
    color: $mainColor;
  }
}
</style>
